<template>
	<view>
		<view class="obligation">
			<view>
				<text>等待付款</text>
			</view>
			<view >
				<text>21小时34分45秒后订单自动关闭</text>
			</view>
		</view>
		<!-- 分割线 -->
		<view class="fenge"></view>
		<view class="site">
			<!-- 图标区域 -->
			<view class="site_img">
				<view class=""><text class="iconfont icon-shouhuodizhi"></text></view>
				
			</view>
			<!-- 地址区域 -->
			<view class="site_text">
				<view>
					<view><text>收货人:{{messageString[6]}}</text></view>
				</view>
				<view class="">
					<view><text>手机号:{{messageString[7]}}</text></view>
				</view>
				<view>
					<view class=""><text>地址:{{messageString[8]}}</text></view>
				</view>
			</view>
			
		</view>
		<!-- 分割线 -->
		<view class="fenge"></view>
		<!-- 商品详情加图片区域 -->
		<view class="commodity_content">
			<view  class="commodity_text">
				<!-- 图片区域 -->
				<view class="commodity_img">
					<image :src="imgUrl+messageString[2]" mode="" @error="messageString[2]='assets/zanwu.png'"></image>
				</view>
				<!-- 商品大小型号区域 -->
				<view class="commodity_color">
					<view><text>{{messageString[4]}}</text></view>										
					<view class="commodity_color1">
						<text>{{messageString[5]}}</text>
						<text>{{messageString[1]}}</text>
					</view>			
				</view>
			</view>
			<!-- 商品价格和数量区域 -->
			<view>
				<view class="commodity">
					<text>￥{{messageString[3]}}</text>
				</view>
				<text>X {{count}}</text>
			</view>
		</view>
		<view class="fenge"></view>
		<!-- 商品价格区域 -->
		<view class="price_site">
			<view class="price_text">
				<view>商品价格</view>
				<view>￥{{messageString[3]}}</view>
			</view>
			<view class="price_text">
				<view>运费（快递）</view>
				<view>￥0.00</view>
			</view>
			<view class="price_text">
				<view>里程抵扣</view>
				<view>￥00.00</view>
			</view>
			<view class="price_text">
				<view>订单总价</view>
				<view>￥{{zong}}</view>
			</view>
		</view>
		</view>
		<view class="fenge"></view>
		<!-- 订单编号和时间  -->
		<view class="flooter">
			<view>订单编号：{{messageString[9]}}<text class="fuzhi">复制</text></view>
			<view><text>创建时间：{{messageString[12]}}</text> </view>
			
		</view>
		<view class="fenge"></view>
		<!-- 底部按钮区域 -->
		<view class="price_anniu">
			<view >
				<button @click="open">取消订单</button>
				<uni-popup ref="popup" type="bottom"></uni-popup>
			</view>
			<view >
				 <navigator url="/pages/spxq_wyc/spxq_wyc" hover-class="navigator-hover">
				<button>付款</button>
				</navigator>
			</view>
		</view>
</template>

<script>
	import store from '@/store/index.js'
	import { mapState, mapActions,mapGetters } from "vuex"
	import http from '../../until/http.js'
	export default {
		data(){
			return{
				// 获取图片的路径
				imgUrl:'http://localhost:8888/getImg?sort=',
			}
		},
		// 从vuex中拿取数据
		computed:{
			// 从vuex中拿取数据
			...mapState(['messageString']),
			messageString() {
				return this.$store.state.messageString 
			},
			 ...mapGetters(['count']),
			 ...mapGetters(['zong']),
			// ...mapState(['numcount']),
			// numcount()
			// {
			// 	console.log(this.$store.state.numcount )
			// }
		},
		methods:{
	      open(){
	       uni.showModal({
	           title: '取消订单',
	           content: '确定要取消订单吗？',
	           success: function (res) {
	               if (res.confirm) {
					   // 用户点击确定取消这条订单，并在订单列表删除
	                   console.log('用户点击确定');
					   uni.navigateTo({//跳转页面
					   		url:"./Personal_center"
					   	});
	               } else if (res.cancel) {
	                   console.log('用户点击取消');
	               }
	           }
	       });
	      }
	   }
	}
</script>

<style lang="less" scoped>
	@import url("~@/static/fonts/iconfont.css");
	
	.fenge{
		background-color: #F8F8F8;
		height: 10px;
	}
	.obligation{
		padding: 10px;
		view{
			margin-top: 10px;
		}
	}
	// 收货地址
	.icon-shouhuodizhi{
		font-size: 40px;
		color: black;
	}
	// 商品信息区域
	.commodity_text{
		display: flex;
		flex-direction:row;
		.commodity_img{
			width: 80px;
			height: 80px;
			padding-bottom: 10px;
			image{
				width: 100%;
				height: 100%;
				width: 80px;
				height: 80px;
			}
		}
		.commodity_color{
			padding: 5px 40px 5px 25px;
			display: flex;
			flex-direction:column;
			
			.commodity_color1{
				margin-top: 10px;
				color: #999999;
				display: flex;
				justify-content: flex-start;
			}
			
		}
	}
	.commodity_content{
		padding: 10px;
		display: flex;
		flex-direction:row;
	}
	// 地址区域
	.site{
		padding: 10px;
		color: #999999;
		
		display: flex;
		.site_img{
			margin-top: 10px;
			display: flex;
			flex-direction: column;
		
			align-items:center;
		}
		.site_text{
			margin-left: 10px;
			display: flex;
			flex-direction: column;
			.site_person{
				display: flex;
				justify-content: space-between;
			}
		}
	}
	// 具体价格
	.price_site{
		padding: 10px;
		display: flex;
		flex-direction: column;
		.price_text{
			display: flex;
			justify-content: space-between;
		}
	}
	// 订单编号时间
	.flooter{
		padding: 10px;
		color: #999;
		.fuzhi{
			border: 1px solid #999;
			margin-left: 15px;
		}
	}
	// 底部按钮区域
	.price_anniu{
		view{
			margin-right: 10px;
		}
		padding:10px 0 10px 10px;
		display: flex;
		justify-content: flex-end;
		}
</style>
